<script setup lang="ts">
  import { PropType, ref, watch } from 'vue'
  import { ComponentListItem, DataConnectConfig } from '../../hooks/types'
  import _ from 'lodash'
  import CustomInput from '../component-list/CustomInput.vue'
  import InputSetting from './components/InputSetting.vue'
  import TextareaSetting from './components/TextareaSetting.vue'
  import RadioSetting from './components/RadioSetting.vue'
  import CheckboxSetting from './components/CheckboxSetting.vue'
  import SingleSelectSetting from './components/single-select-setting/index.vue'
  import MultipleSelectSetting from './components/MultipleSelectSetting.vue'
  import DividerSetting from './components/DividerSetting.vue'
  import DatetimeSetting from './components/DatetimeSetting.vue'
  import UploadSetting from './components/UploadSetting.vue'
  import DataConnectSetting from './components/data-connect-setting/index.vue'
  import ChildFormSetting from './components/child-form-setting/index.vue'
  import CustomSingleSelect from '@/views/order/custom/form/component-list/CustomSingleSelect.vue'
  import { useTemplateForm } from '@/views/order/custom/hooks/useTemplate'

  const { componentList, addComponent } = useTemplateForm()

  const props = defineProps({
    needUpdateComponent: {
      type: Object as PropType<ComponentListItem>,
      default: () => null,
    },
    templateId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update-component', value: ComponentListItem): void
  }>()

  const _needUpdateComponent = ref<ComponentListItem | null>(null)
  const componentWidthOptions = [
    { label: '1/4', value: '1/4' },
    { label: '1/3', value: '1/3' },
    { label: '1/2', value: '1/2' },
    { label: '整行', value: '1' },
  ]

  const emitsUpdateComponentCall = () => {
    if (_needUpdateComponent.value) {
      emits('update-component', { ..._needUpdateComponent.value })
    }
  }

  const handleDataConnectSettingFieldFillRuleChange = (rules: DataConnectConfig['fillRules']) => {
    if (_needUpdateComponent.value) {
      _needUpdateComponent.value.dataConnectConfig.fillRules = rules.map((rule) => {
        if (rule.fillMode === 1) {
          addComponent('input', true, rule.fromFieldName)
          rule.fillMode = 2
          rule.toFieldName = componentList.value.at(-1).label
          rule.toFieldId = componentList.value.at(-1).id
        }
        return rule
      })
      emitsUpdateComponentCall()
    }
  }

  watch(
    () => props.needUpdateComponent,
    (value) => {
      if (value) {
        _needUpdateComponent.value = _.cloneDeep(value)
      }
    },
    { deep: true },
  )
</script>

<template>
  <div class="order-custom-form-setting">
    <template v-if="_needUpdateComponent">
      <template v-if="props.needUpdateComponent">
        <div v-if="_needUpdateComponent.type !== 'divider'" class="setting-item component-width">
          <div class="label">组件宽度</div>
          <div class="value">
            <custom-single-select
              v-model="_needUpdateComponent.width"
              placeholder="请选择组件宽度"
              :options="componentWidthOptions"
              :clear="false"
              @change="emitsUpdateComponentCall"
            />
          </div>
        </div>

        <div v-if="_needUpdateComponent.type !== 'divider'" class="setting-item component-label">
          <div class="label">标签</div>
          <div class="value">
            <custom-input
              v-model="_needUpdateComponent.label"
              placeholder="请输入新的标签"
              @input="emitsUpdateComponentCall"
            />
          </div>
        </div>
        <div v-if="_needUpdateComponent.type !== 'divider'" class="setting-item required">
          <div class="label">是否必填</div>
          <div class="value">
            <el-switch
              v-model="_needUpdateComponent.required"
              size="small"
              @change="emitsUpdateComponentCall"
            />
          </div>
        </div>

        <input-setting
          v-if="props.needUpdateComponent.type === 'input'"
          v-model="_needUpdateComponent.inputConfig"
          @change="emitsUpdateComponentCall"
        />

        <textarea-setting
          v-if="props.needUpdateComponent.type === 'textarea'"
          v-model="_needUpdateComponent.textareaConfig"
          @change="emitsUpdateComponentCall"
        />

        <radio-setting
          v-if="props.needUpdateComponent.type === 'radio'"
          v-model="_needUpdateComponent.radioConfig"
          @change="emitsUpdateComponentCall"
        />

        <checkbox-setting
          v-if="props.needUpdateComponent.type === 'checkbox'"
          v-model="_needUpdateComponent.checkboxConfig"
          @change="emitsUpdateComponentCall"
        />

        <single-select-setting
          v-if="props.needUpdateComponent.type === 'single-select'"
          v-model="_needUpdateComponent.singleSelectConfig"
          :template-id="props.templateId"
          @change="emitsUpdateComponentCall"
        />

        <multiple-select-setting
          v-if="props.needUpdateComponent.type === 'multiple-select'"
          v-model="_needUpdateComponent.multipleSelectConfig"
          @change="emitsUpdateComponentCall"
        />

        <divider-setting
          v-if="props.needUpdateComponent.type === 'divider'"
          v-model="_needUpdateComponent.dividerConfig"
          @change="emitsUpdateComponentCall"
        />

        <datetime-setting
          v-if="props.needUpdateComponent.type === 'date-time'"
          v-model="_needUpdateComponent.dateTimeConfig"
          @change="emitsUpdateComponentCall"
        />

        <upload-setting
          v-if="props.needUpdateComponent.type === 'file-upload'"
          v-model="_needUpdateComponent.fileUploadConfig"
          @change="emitsUpdateComponentCall"
        />

        <data-connect-setting
          v-if="props.needUpdateComponent.type === 'data-connect'"
          v-model="_needUpdateComponent.dataConnectConfig"
          @change="emitsUpdateComponentCall"
          @field-fill-rule-change="handleDataConnectSettingFieldFillRuleChange"
        />

        <child-form-setting
          v-if="props.needUpdateComponent.type === 'child-form'"
          v-model="_needUpdateComponent.childFormConfig"
          :component-id="_needUpdateComponent.id"
          :template-id="props.templateId"
          @change="emitsUpdateComponentCall"
        />
      </template>
    </template>
  </div>
</template>

<style scoped lang="scss">
  .order-custom-form-setting {
    width: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 8px;

    .setting-item {
      display: flex;
      flex-direction: column;
      row-gap: 4px;
    }

    .child-form.child-field {
      .label {
        display: flex;
        column-gap: 12px;

        :deep(.el-dropdown) {
          display: flex;
          align-items: center;
        }
      }
    }

    .required {
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: 8px;
    }

    .radio,
    .checkbox,
    .single-select,
    .multiple-select {
      .label {
        display: flex;
        column-gap: 12px;
      }

      .value {
        display: flex;
        flex-direction: column;
        row-gap: 8px;

        .item {
          display: flex;
          align-items: center;
          column-gap: 8px;

          .input {
            flex: 1;
          }
        }
      }
    }

    .number-column-of-each-row {
      .value {
        display: flex;
        column-gap: 8px;
      }
    }
  }
</style>
